@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@import "../mixins/button";
//按钮
@include create(btn) {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $button-default-backgroud-fill;
  border: $border-base;
  border-color: $button-default-border;
  color: $button-default-color;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: $button-font-weight;
  & + & {
    margin-left: 5px;
  }
  @include button-size(
    $button-padding-vertical,
    $button-padding-horizontal,
    $button-font-size,
    $button-border-radius
  );

  &:hover {
    color: $color-primary;
    border-color: $color-primary-light-7;
    background-color: $color-primary-light-9;
  }

  &:active {
    color: mix($color-black, $color-primary, $button-active-shade-percent);
    background-color: $color-primary-light-9;
    border-color: mix(
      $color-black,
      $color-primary,
      $button-active-shade-percent
    );
    outline: none;
  }
  //禁用
  @include when(disabled) {
    &,
    &:hover,
    &:focus {
      color: $button-disabled-color;
      cursor: not-allowed;
      background-image: none;
      background-color: $button-disabled-fill;
      border-color: $button-disabled-border;
    }

    &.aiui-button-text {
      background-color: transparent;
    }

    &.is-plain {
      &,
      &:hover,
      &:focus {
        background-color: $color-white;
        border-color: $button-disabled-border;
        color: $button-disabled-color;
      }
    }
  }
  //图标按钮
  & [class*="aiui-icon-"] {
    & + span {
      margin-left: 5px;
    }
  }
  //流体
  @include when(fluid) {
    width: 100% !important;
    margin-left: 0px;
  }
  //圆角
  @include when(round) {
    border-radius: 100px;
  }
  //圆形图标按钮
  @include when(circle) {
    padding: $button-padding-vertical;
    border-radius: 50%;
  }
  //不同主题
  @include m(primary) {
    @include btn-theme(
      $button-primary-color,
      $button-primary-fill,
      $button-primary-border
    );
  }
  @include m(success) {
    @include btn-theme(
      $button-success-color,
      $button-success-fill,
      $button-success-border
    );
  }
  @include m(info) {
    @include btn-theme(
      $button-info-color,
      $button-info-fill,
      $button-info-border
    );
  }
  @include m(warning) {
    @include btn-theme(
      $button-warning-color,
      $button-warning-fill,
      $button-warning-border
    );
  }
  @include m(error) {
    @include btn-theme(
      $button-error-color,
      $button-error-fill,
      $button-error-border
    );
  }
  //不同大小
  //大型按钮
  @include m(lg) {
    @include button-size(
      $button-lg-padding-vertical,
      $button-lg-padding-horizontal,
      $button-lg-font-size,
      $button-lg-border-radius
    );
    @include when(circle) {
      padding: $button-lg-padding-vertical;
    }
  }
  //小型按钮
  @include m(sm) {
    @include button-size(
      $button-sm-padding-vertical,
      $button-sm-padding-horizontal,
      $button-sm-font-size,
      $button-sm-border-radius
    );
    @include when(circle) {
      padding: $button-sm-padding-vertical;
    }
  }
  //迷你按钮
  @include m(xs) {
    @include button-size(
      $button-xs-padding-vertical,
      $button-xs-padding-horizontal,
      $button-xs-font-size,
      $button-xs-border-radius
    );
    @include when(circle) {
      padding: $button-xs-padding-vertical;
    }
  }
}
//按钮组
@include create(btn-group) {
  @include clearfix;
  display: inline-block;
  vertical-align: middle;

  & > .aiui-btn {
    float: left;
    position: relative;
    & + .aiui-btn {
      margin-left: 0;
    }
    &.is-disabled {
      z-index: 1;
    }
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:first-child:last-child {
      border-top-right-radius: $button-border-radius;
      border-bottom-right-radius: $button-border-radius;
      border-top-left-radius: $button-border-radius;
      border-bottom-left-radius: $button-border-radius;

      &.is-round {
        border-radius: 20px;
      }

      &.is-circle {
        border-radius: 50%;
      }
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    &:not(:last-child) {
      margin-right: -1px;
    }

    &:hover,
    &:focus,
    &:active {
      z-index: 1;
    }

    @include when(active) {
      z-index: 1;
    }
  }

  @each $type in (primary, success, warning, error, info) {
    .aiui-btn-#{$type} {
      &:first-child {
        border-right-color: rgba($color-white, 0.5);
      }
      &:last-child {
        border-left-color: rgba($color-white, 0.5);
      }
      &:not(:first-child):not(:last-child) {
        border-left-color: rgba($color-white, 0.5);
        border-right-color: rgba($color-white, 0.5);
      }
    }
  }
}